<template>
    <div class="position-relative height-100b bg-sidebar">
        <div class="pd-20 pb-10" v-if="room_info">
            <div class="flex align-center jus-between">
                <div class="flex align-center">
                    <el-avatar :size="45" :src="room_info.author.avatar"></el-avatar>
                    <div class="ml-10 anchor-info">
                        <div class="color-fff font-16">{{ room_info.author.name }}的直播间</div>
                        <div class="flex align-center color-fff">
                            <div class="flex align-center">
                                <el-image :src="require('@/assets/icon/live/popular.png')"
                                    style="width: 26px; height: 26px"></el-image>

                                <span>{{ room_info.popular }}</span>
                            </div>
                            <!-- <div class="flex align-center ml-20">
                                <el-image :src="require('@/assets/icon/live/watcher.png')" fit="cover" style="width: 18px; height: 18px"></el-image>
                                <span>{{room_info.online_user}}</span>
                            </div>-->
                        </div>
                    </div>
                </div>
                <div>
                    <!-- <div class="attention cursor-pointer">
                        <i class="el-icon font-12 el-icon-plus color-fff"></i>
                        <span class="pl-2">关注</span>
                    </div> -->

                    <div class="flexFS colorfff size14">
                        <div class="interest hand" v-if="!room_info.attention" @click="attentionFun(room_info.user_id, room_info)">关注
                        </div>
                        <div v-else class="followed  hand" @click="cancelAttentionFun(room_info.user_id, room_info)">已关注
                        </div>
                    </div>
               
                </div>
            </div>

            <div class="mt-18 font-14 color-eee">{{ room_info.desc }}</div>
            <div class="color-fff mt-30 font-16">
                <span class>在线用户</span>
                <span class="pl-4">{{ room_info.online_user }}</span>
            </div>
            <div class="mt-8 flex align-center">
                <div class="width-3b">
                    <i @click="prev" class="el-icon el-icon-arrow-left font-20 cursor-pointer"></i>
                </div>
                <div class="width-94b watcher-list pl-10 pr-10">
                    <div :class="{ 'ml-3': index > 0 }" :key="index" v-for="(item, index) in online_users">
                        <el-avatar :size="30" :src="item.avatar"></el-avatar>
                    </div>
                </div>
                <div class="width-3b">
                    <i @click="next" class="el-icon el-icon-arrow-right font-20 cursor-pointer"></i>
                </div>
            </div>
        </div>

        <el-divider></el-divider>

        <div class="pd-20">
            <div class="color-purple">
                官方提醒：直播间严禁出现违法违规、低俗谩骂等不良内容，一经发现，超管讲对账号予以禁言、封停、永久封禁处理。请用户通过官方渠道进行{{ $store.state.config.coin_name }}充值，谨防受骗。未成年用户请勿在直播间进行任何充值消费行为。
            </div>
            <div class="scroll-chat mt-5" ref="chat">
                <div :key="index" class="mt-13" v-for="(item, index) in comments" v-if="item.message">
                    <div class="flex align-flex-start" v-if="item.type == 'text'">
                        <div class="color-yellow-light" style="flex:none">{{ item.user_info.name }}：</div>
                        <div class="ml-8 color-fff">{{ item.message }}</div>
                    </div>
                    <div class="color-fff flex jus-center" v-else-if="item.type == 'access'">
                        <div class="pd-7 pl-14 pr-14 radius-20" style="background:#272337">
                            <span>欢迎</span>
                            <span class="pl-3 pr-3" style="color:#988DD0">{{ item.user_info.name }}</span>
                            <span>进入直播间</span>
                        </div>
                    </div>
                    <div class="color-fff flex jus-center mt-10" v-else-if="item.type == 'gift'">
                        <div class="pd-7 pl-14 pr-14 radius-20 width-80b position-relative" style="background:#272337">
                            <span class="color-yellow-light">{{ item.user_info.name }}</span>
                            <span class="pl-3">送出礼物</span>
                            <span class="pl-3" style="color:#FF83E4">{{ item.gift_info.name }}</span>
                            <div class="position-absolute" style="bottom: 0;right: 3%;">
                                <el-image :src="item.gift_info.icon" fit="cover" style="width: 40px;"></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="position-absolute fiexd-input">
            <input :maxlength="200" class="my-input text-indent-10" placeholder="说点什么吧" type="text" v-model="content" />
            <el-button :loading="button_loading" @click="comment" round size="small">发送</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            watcher: [],
            content: '',
            button_loading: false,
            comments: [],
            submitComplete:false
        }
    },
    props: {
        room_info: {
            type: Object,
            default() {
                return {}
            },
        },
        online_users: {
            type: Array,
            default() {
                return []
            },
        },
    },
    watch: {
        '$store.state.live.message'(value) {
            this.comments.push(value)
            this.$nextTick(() => {
                let ref = this.$refs.chat
                ref && (ref.scrollTop = ref.scrollHeight)
            })
        },
        room_info(value) {
            console.log(value, 112121)
        },
    },
    methods: {
        prev() { },
        next() { },
        comment() {
            if (!this.content) {
                this.$message({
                    message: '请输入消息内容',
                    type: 'warning',
                    customClass: 'super-message',
                })
                return true
            }
            this.$emit('sendMessage')
        },

        attentionFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    that.room_info.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        //取消关注
        cancelAttentionFun(id) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/user-attention/cancel/' + id)
                .then((res) => {
                    this.submitComplete = false
                    this.room_info.attention = 0
                    this.$message({
                        message: '已取消',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.attention {
    padding: 3px 12px;
    color: #fff;
    font-size: 15px;
    border-radius: 100px;
    background-color: #ff1c6d;
    display: flex;
    align-items: center;
}
.anchor-info {
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.watcher-list {
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth;
}

.watcher-list::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

/deep/.el-divider {
    background: #242424 !important;
    margin: 10px 0 !important;
}

/deep/.my-input {
    border: none;
    color: #f3f3f3;
    background: #272337;
    width: calc(100% - 4.5vw);
    // margin-left: 30px;
    height: 4.4vh;
    border-radius: 4vh;
    outline: none;
    padding-right: 70px;
    padding-block: 0;
    padding-inline: 0;
    text-indent: 1vw;
    z-index: 1;
    font-size: 1.7vh;
}

/deep/.el-button--small.is-round {
    margin-top: 3px;
    background: #403a57;
    border: none;
    color: #fff;
    // padding: 11px 16px;
    font-size: 1.6vh;
    position: absolute;
    top: -2px;
    right: 1px;
    width: 4vw;
    height: 4vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fiexd-input {
    bottom: 1.8vh;
    width: 94%;
    margin-left: 3%;
}

.scroll-chat {
    height: calc(100vh - 4rem - 390px);
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.scroll-chat::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
.interest {
    width: 80px;
    background-color: #ff1c6d;
    color: #fff;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    margin-left: 20px;
    text-align: center;
    font-size: 11px;
}

.followed {
    width: 80px;
    background-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-left: 20px;
    border-radius: 50px;
    font-size: 11px;
}
</style>